<template>
  <div class="ebook" ref="ebook">
    <ebook-render> </ebook-render>
    <ebook-title></ebook-title>
    <ebook-menu></ebook-menu>
    <ebook-book-mark></ebook-book-mark>
    <ebook-header></ebook-header>
    <ebook-footer></ebook-footer>
  </div>
</template>
<script>
import EbookBookMark from '../../components/Ebook/EbookBookMark.vue';
import EbookMenu from "../../components/Ebook/EbookMenu.vue";
import ebookRender from "../../components/Ebook/ebookRender.vue";
import EbookTitle from "../../components/Ebook/EbookTitle.vue";
import { getReadTime, saveReadTime } from "../../utils/localStorage";
import { ebookMixin } from "../../utils/mixin";
import ebookHeader from "../../components/Ebook/EbookHeader.vue";
import EbookFooter from '../../components/Ebook/EbookFooter.vue';
export default {
  mixins: [ebookMixin],
  components: { ebookRender, EbookTitle, EbookMenu, EbookBookMark ,ebookHeader, EbookFooter},
  watch:{
    offsetY(slideValue){
      if(!this.menuVisible&&this.bookAvailable){
         if(slideValue>0){
        this.move(slideValue)
      }else if(slideValue===0){
        this.reset()
      }
      }
     
    }
  },
  methods: {
    reset(){
      this.$refs.ebook.style.top=0
      this.$refs.ebook.style.transition='all .2s linear'
      setTimeout(()=>{
        this.$refs.ebook.style.transition=''
      },200)
    },
    move(slideValue){
      this.$refs.ebook.style.top=slideValue+'px'
    },
    roadSetTime() {
      let timer = getReadTime(this.fileName);
      if (!timer) {
        timer = 0;
      }
      this.task = setInterval(() => {
        timer++;
        if (timer % 30 === 0) {
          saveReadTime(this.fileName, timer);
        }
      }, 1000);
    },
  },
  mounted() {
    this.roadSetTime();
  },
  beforeDestroy() {
    if (this.task) {
      clearInterval(this.task);
    }
  },
};
</script>
<style lang="scss" scoped>
  .ebook{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
